<template>
  <div class="page-container">
    <div class="page-card-container" v-global-loading="loading">
      <div class="userinfo-box" v-show="selectedKeys.includes(2)">
        <div style="display: flex; justify-content: end">
          <div class="btn-edit commonBtn-line" @click="goShowUserinfo">
            编辑
          </div>
        </div>
        <div class="flex_row">
          <img
            :src="data.avatar ? data.avatar : avatar"
            alt=""
            style="width: 120px; height: 120px; border-radius: 4px"
          />
          <div class="flex1 info-box" style="margin-left: 30px">
            <div class="flex_row_ycenter mb-10">
              <div class="info-box-item-left">
                <span class="c-000 fw_bold">姓名：</span>{{ data.realName }}
              </div>
              <div>
                <span class="c-000 fw_bold">性别：</span>
                <span v-if="data.sex == 1">男</span>
                <span v-else-if="data.sex == 2">女</span>
                <span v-else-if="data.sex == 3">保密</span>
                <span v-else>暂未设置</span>
              </div>
            </div>
            <div class="flex_row_ycenter mb-10">
              <div class="info-box-item-left">
                <span class="c000 fw_bold">登录账号：</span>{{ data.account }}
              </div>
              <div>
                <span class="c000 fw_bold">邮箱地址：</span
                >{{ data.email ? data.email : "暂未设置" }}
              </div>
            </div>
            <div class="flex_row_ycenter mb-10">
              <div class="info-box-item-left">
                <span class="c000 fw_bold">部门：</span
                >{{ data.orgName ? data.orgName : "暂未设置" }}
              </div>
              <div class="flex1">
                <span class="c000 fw_bold">个性签名：</span
                >{{ data.signature ? data.signature : "暂未设置" }}
              </div>
            </div>
          </div>
        </div>
        <div class="mt-40">
          <div class="flex_row_ycenter mb-40">
            <div
              class="flex_row_ycenter"
              style="border-right: 1px solid #cdeaf7; padding-right: 40px"
            >
              <div class="icon-box flex_row_xy_center">
                <component is="lock-outlined" class="c-fff fs-30"></component>
              </div>
              <div class="fw_bold ml-10">登录密码</div>
            </div>
            <div class="flex1 ml-40 mr-40">
              <div class="flex_row_ycenter">
                <div>密码强度：</div>
                <div>
                  <a-progress
                    :percent="100"
                    :showInfo="false"
                    style="width: 200px"
                  />
                </div>
                <div class="ml-10">高</div>
              </div>
              <div class="mt-10 c-999">
                安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含数字、大写字母、小写字母、特殊字符至少三项且长度8~18位的密码。
              </div>
            </div>
            <div class="commonBtn-line" @click="goShowPassReset">修改密码</div>
          </div>
        </div>
      </div>
      <!-- 修改用户信息 -->
      <a-modal
        v-model:open="showUserinfo"
        title="基本资料"
        width="30%"
        @ok="showUserinfoCon"
      >
        <div v-global-loading="modalloading">
          <a-form
            ref="userFormRef"
            :model="userForm"
            :label-col="{span: 6}"
            :wrapper-col="{span: 18}"
          >
            <div class="flex_row_xy_center">
              <div class="avatar-box pointer" @click="changeAvatar">
                <img
                  :src="userForm.avatar ? userForm.avatar : avatar"
                  alt=""
                  style="width: 120px; height: 120px; border-radius: 4px"
                />
                <div class="change-box flex_row_xy_center">修改头像</div>
              </div>
            </div>
            <a-form-item label="登录账号">
              <div>{{ userForm.account }}</div>
            </a-form-item>
            <a-form-item
              label="姓名"
              name="nickName"
              :rules="[{required: true, message: '请输入'}]"
            >
              <a-input v-model:value="userForm.nickName" />
            </a-form-item>
            <a-form-item
              label="性别"
              name="sex"
              :rules="[{required: true, message: '请选择'}]"
            >
              <a-radio-group v-model:value="userForm.sex">
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
                <a-radio :value="3">保密</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="邮箱地址"
              name="email"
              :rules="[
                {
                  message: '请输入正确的邮箱地址',
                  type: 'email'
                }
              ]"
            >
              <a-input v-model:value="userForm.email" />
            </a-form-item>
            <a-form-item
              label="个性签名"
              name="signature"
              :rules="[{required: false, message: '请输入'}]"
            >
              <a-textarea v-model:value="userForm.signature" />
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
      <!-- 重置用户密码 -->
      <a-modal
        v-model:open="showPassReset"
        title="修改密码"
        width="30%"
        @ok="showPassResetCon"
      >
        <a-form
          ref="userFormRef2"
          :model="userForm"
          :label-col="{span: 6}"
          :wrapper-col="{span: 18}"
        >
          <a-form-item
            label="旧密码"
            name="passwordOld"
            :rules="{required: true}"
          >
            <a-input-password v-model:value="userForm.passwordOld" />
          </a-form-item>
          <a-form-item label="新密码" name="passwordNew" :rules="newrules">
            <a-input-password v-model:value="userForm.passwordNew" />
          </a-form-item>
          <a-form-item
            label="确认新密码"
            name="newPassword1"
            :rules="newrules1"
          >
            <a-input-password v-model:value="userForm.newPassword1" />
          </a-form-item>
          <div class="c-999" style="padding: 0 10px 20px 15%">
            安全性高的密码可以使帐号更安全,建议您定期更换密码，设置一个包含数字、大写字母、小写字母、特殊字符至少三项且长度8~18位的密码。
          </div>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {Modal} from "ant-design-vue";
import {message} from "ant-design-vue";
import {
  userDetail,
  userEdit,
  userupdatePwd,
  userChangeAvatar
} from "@/api/configCenter/auth/people";
import {getLoginUser, userInfo} from "@/api/common";
import {trigerUpload, trigerUploadObs} from "@/utils/common";
import avatar from "@/assets/imgs/maxavacer.png";
import useAppStore from "@/store/app";
const codeLoading = ref(false);
import {computed, ref} from "vue";
import useUserStore from "@/store/user";
import {useRouter} from "vue-router";
let router = useRouter();
const selectedKeys = ref([2]);
const data = computed(() => {
  return useUserStore.userInfo;
});
const loading = ref(false);
//修改密码
const showPassReset = ref(false);
const userFormRef2 = ref();
//新密码输入框校验
const passReg =
  /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,18}$/;
let newrules: any = ref([
  {required: true, message: "请输入", trigger: "change"},
  {
    pattern: passReg,
    message: "格式不正确，请修改您的密码格式",
    trigger: "change"
  }
]);
let newrules1: any = ref([
  {required: true, validator: cheacknewpassword, trigger: "change"}
]);
function cheacknewpassword(rules, value, callback) {
  if (value) {
    if (userForm.value.passwordNew == userForm.value.newPassword1) {
      return Promise.resolve();
    } else {
      return Promise.reject("两次密码不一样");
    }
  } else {
    return Promise.reject("请输入");
  }
}
const showPassResetCon = () => {
  userFormRef2.value.validate().then((res) => {
    if (userForm.value.newPassword1 != userForm.value.passwordNew) {
      message.error("两次密码输入不一致");
      return false;
    }
    useAppStore.loading = true;
    userupdatePwd({
      passwordOld: userForm.value.passwordOld,
      passwordNew: userForm.value.passwordNew
    })
      .then((res) => {
        message.success("修改成功,请重新登录");
        useUserStore
          .logout()
          .then((res) => {
            useAppStore.loading = false;
            router.push(`/login`);
          })
          .catch((err) => {
            useAppStore.loading = false;
          });
      })
      .catch((err) => {
        useAppStore.loading = false;
      });
  });
};
function goShowPassReset() {
  loading.value = true;
  getLoginUser()
    .then((res) => {
      loading.value = false;
      userForm.value = res.data;
      showPassReset.value = true;
      userFormRef2.value.clearValidate();
    })
    .catch((err) => {
      loading.value = false;
    });
}
//编辑
const showUserinfo = ref(false);
const userForm: any = ref({});
const userFormRef = ref();
function showUserinfoCon() {
  userFormRef.value.validate().then(async (res) => {
    modalloading.value = true;
    try {
      userForm.value.avatar
        ? userForm.value.avatar
        : "https://kacunchu001.obs.cn-east-3.myhuaweicloud.com/dongcheng/file/avatar1698630507383hsdgunpx.png";
      await userEdit(userForm.value);
      await userChangeAvatar({avatar: userForm.value.avatar});
      message.success("编辑成功");
      useUserStore.getUserInfo();
      modalloading.value = false;
      showUserinfo.value = false;
    } catch {
      modalloading.value = false;
      message.error("编辑失败");
    }
  });
}
function goShowUserinfo() {
  loading.value = true;
  userInfo()
    .then((res) => {
      loading.value = false;
      if (res.data.sex === 0 || !res.data.sex) {
        res.data.sex = 3;
      }
      userForm.value = {
        id: res.data.id,
        nickName: res.data.realName,
        name: res.data.realName,
        account: res.data.account,
        email: res.data.email,
        sex: res.data.sex,
        signature: res.data.signature,
        avatar: res.data.avatar
      };
      showUserinfo.value = true;
      userFormRef.value.clearValidate();
    })
    .catch((err) => {
      loading.value = false;
    });
}
const modalloading = ref(false);
//修改头像
const changeAvatar = async () => {
  trigerUpload().then((res: any) => {
    let files = res.target.files[0];
    if (
      files.type == "image/jpeg" ||
      files.type == "image/png" ||
      files.type == "image/jpg"
    ) {
      modalloading.value = true;
      trigerUploadObs(res)
        .then((data) => {
          userForm.value.avatar = data;
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else {
      message.error("请上传jpeg、png、jpg类型的图片");
    }
  });
};
</script>
<style scoped lang="less">
.avatar-box {
  position: relative;
  margin-bottom: 30px;

  .change-box {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 38px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    z-index: 10;
  }
}

.code-box {
  background-color: #555555;
  color: #ffffff;
  padding: 4px 10px;
  cursor: pointer;
}

.main-box {
  // width: 60vw;
  display: flex;

  .left {
    width: 200px;
    margin-right: 10px;
  }

  .right {
    flex: 1;
    // padding: 20px;

    .mycompany-box {
      padding: 14px;

      .mycompany-item {
        padding: 8px;
        border: 1px solid #bbbbbb;
      }
    }

    .userinfo-box {
      position: relative;

      .btn-edit {
        position: absolute;
        top: 0px;
        right: 0px;
      }

      .icon-box {
        width: 60px;
        height: 60px;
        background-color: #bbbbbb;
        border-radius: 50%;
      }

      .info-box {
        padding: 0 10px;

        .info-box-item-left {
          width: 300px;
        }
      }
    }
  }

  .button {
    justify-content: space-around;
    margin-top: 8px;
  }
}

.info-box-item-left {
  width: 300px;
}

.guanliqiye {
  min-height: 10vw;
  max-height: 35vw;
  overflow: scroll;
}
</style>
